<template>
    <div>
        <div class="pwd_frame">
            <input type="tel" maxlength="6" id="pwd_input" v-model="code" v-focus="focusStatus"/>
            <div v-for="(item, index) in figure" :key="index" class="pwd_circle"><span :class="{pwdShow:item===1,pwdHide:item===0}">{{item}}</span></div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
        },
        data() {
            return {
                code: '',
                figure: [0, 0, 0, 0, 0, 0],
                focusStatus: true
            };
        },
        directives: {
            focus: {
                // 初始进入自动获取焦点
                inserted(el, {value}) {
                    if (value) {
                        el.focus();
                    }
                },
                // 焦点状态改变重新获取焦点
                update(el, {value}) {
                    if (value) {
                        el.focus();
                    }
                }
            }
        },
        methods: {
            clearCode() {
                this.code = '';
            }
        },
        watch: {
            code(val) {
                let figure = val.split('');
                this.figure = [0, 0, 0, 0, 0, 0];
                for (let i = 0; i < figure.length; i++) {
                    this.$set(this.figure, i, figure[i]);
                }
                this.$emit('inputCode', val);
            }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl"
    .pwd_frame {
        width: 100%;
        letter-spacing: -0.5em;
        margin: 4vw auto 0;
        position: relative;
        text-align: center;
        & input{
            position: absolute;
            width: 100vw;
            height: 10.5vw;
            color: #666;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 1px;
            opacity: 0;
            z-index: 9999;
        }
        & .pwd_circle {
            display: inline-block;
            vertical-align: middle;
            width: 12vw;
            height: 10vw;
            text-align: center;
            margin: 0 1.6vw;
            bor-b(#999);
            & span {
                display: block;
                line-height: 10vw;
                width: 10vw;
                height: 10vw;
                text-align: center;
                color: #666;
                &.pwdShow{
                    opacity: 1;
                }
                &.pwdHide{
                    opacity: 0;
                }
            }
        }
    }
</style>
